<template>
	<view class="main" :style="{ top: top, right: right }">
		<view class="avatars-container" @click.stop="membersInfo">
			<!-- 动态计算容器宽度避免头像被截断 -->
			<view class="avatars-wrapper" :style="{ width: calculateWrapperWidth() }">
				<view class="avatar-item" v-for="(item, index) in visibleUsers" :key="item.id" :style="{ left: index * overlapDistance + 'rpx' }">
					<view class="img_box">
						<image class="img" :src="item.iconPath || defaultAvatar" mode="aspectFill" @error="item.iconPath = defaultAvatar"></image>
					</view>
				</view>
			</view>

			<!-- 显示用户数量 - 修复条件判断并优化显示逻辑 -->
			<view class="count">
				<text class="count_text">{{ countText }}</text>
			</view>

			<!-- 空状态显示 -->
			<view class="empty-state" v-if="users.length === 0">
				<text class="empty-state-text">暂无用户</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'UsersBar',
	props: {
		// 最多显示的头像数量
		maxVisible: {
			type: Number,
			default: 5
		},
		// 头像重叠距离(rpx)，值越小重叠越多
		overlapDistance: {
			type: Number,
			default: 30
		},
		// 头像尺寸(rpx)
		avatarSize: {
			type: Number,
			default: 60
		},
		// 始终显示数量，即使未超过maxVisible
		alwaysShowCount: {
			type: Boolean,
			default: false
		},
		top: {
			type: String,
			default: '50rpx'
		},
		right: {
			type: String,
			default: '50rpx'
		}
	},
	data() {
		return {
			defaultAvatar: '/static/images/default-avatar.png'
		};
	},
	computed: {
		storeData() {
			return this.$store.state.msg || {};
		},
		markers() {
			return this.$store.state.msg.markers;
		},
		users() {
			if (!this.storeData || !this.storeData.user || this.markers.length === 0) {
				return [];
			}

			return (this.markers || []).filter((item) => item.id !== this.storeData.user.userId && item.type === '普通用户');
		},
		visibleUsers() {
			const list = this.users.slice(0, this.maxVisible); // 截取前 maxVisible 个元素
			const map = new Map();
			const uniqueArr = list.filter((item) => {
				if (!map.has(item.id)) {
					// 如果 id 未被记录，标记为已存在并保留当前元素
					map.set(item.id, true);
					return true;
				} else {
					// 如果 id 已存在，过滤掉当前元素（不保留）
					return false;
				}
			});
			return uniqueArr;
		},
		// 是否应该显示数量
		shouldShowCount() {
			// 调试信息，帮助确认问题
			console.log('用户总数:', this.users.length);
			console.log('最大显示数:', this.maxVisible);

			// 如果设置了alwaysShowCount，或者用户数超过最大显示数，则显示
			return this.alwaysShowCount || this.users.length > this.maxVisible;
		},
		// 数量文本内容
		countText() {
			if (this.users.length > this.maxVisible) {
				return `+${this.users.length - this.maxVisible}`;
			} else {
				return `${this.users.length}`;
			}
		}
	},

	methods: {
		// 动态计算容器宽度，确保最后一个头像完整显示
		calculateWrapperWidth() {
			const count = this.visibleUsers.length;
			if (count === 0) return '0rpx';
			// 计算方式：第一个头像宽度 + 剩余头像的重叠部分宽度
			return `${this.avatarSize + (count - 1) * this.overlapDistance}rpx`;
		},
		membersInfo() {
			const format = encodeURIComponent(JSON.stringify(this.markers));

			uni.navigateTo({
				url: `/pages/membersInfo/membersInfo?key=普通用户`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60rpx;
	min-width: 200rpx;
	border-radius: 30rpx;
	background-color: rgba(0, 0, 0, 0.2);
}

.avatars-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 60rpx;
	flex-wrap: nowrap;
}

.avatars-wrapper {
	position: relative;
	height: 60rpx;
	flex-shrink: 0; /* 防止被压缩 */
}

.avatar-item {
	position: absolute;
	top: 0;
}

.img_box {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	border: 2rpx solid #fff;
	overflow: hidden;
	background-color: #f5f5f5;
}

.img {
	width: 60rpx;
	height: 60rpx;
}

.count {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.3);
	margin-left: 10rpx;
	flex-shrink: 0; /* 防止被压缩 */
	/* 确保数量控件始终显示在最前面 */
	z-index: 10;
}

.count_text {
	color: #fff;
	font-size: 26rpx;
}

.empty-state-text {
	color: #878787;
	font-size: 28rpx;
	padding: 20rpx;
}
</style>
